<div class="left-pane">
	<ul>
		<div class="sort-cat">
			<? foreach ($categories as $category): ?>
				<? if( $category->level > 0 ) continue; ?>
				<div>
					<li id="menu_item_<?=$category->id?>" class="shower ajax-filter-category" data-show=".cat-<?= $category->id ?>" data-id="<?= $category->id ?>" data-type="category">
						<a class="title"><?= $category->title ?> </a>
						<a class="icon pull-right font-small pad5 confirm-delete" title="Удалить" href="<?=CHtml::normalizeUrl(array('category/deleteCategory', 'id' => $category->id)) ?>">g</a>
						<a class="icon pull-right font-small pad5 ajax-load" title="Редактировать" data-page="<?=CHtml::normalizeUrl(array('category/EditForm/id/'. $category->id)) ?>" href="#i">i</a>
						<a class="icon pull-right font-small pad5 ajax-load" data-page="<?=CHtml::normalizeUrl(array('category/addForm/parent_id/'.$category->id))?>" href="#g">+</a>
					</li>

					<? if( ($subcategories = $category->sub) != null ): ?>
						<div id="subcat_<?=$category->id?>" class="sort-subcat subcategory-container" style="display: none;">
							<? foreach ($subcategories as $subcategory) :?>
								<div>
									<li id="menu_item_<?=$subcategory->id?>" class="shower subcat cat-<?= $category->id ?> ajax-filter-category" data-id="<?= $subcategory->id ?>" data-type="category" data-show=".cat-<?= $subcategory->id ?>">
										<a class="title">
											<?= $subcategory->title ?>
										</a>
										<a class="icon pull-right font-small pad5 confirm-delete" href="<?=CHtml::normalizeUrl(array('category/deleteCategory/id/' . $subcategory->id)) ?>">g</a>
										<a class="icon pull-right font-small pad5 ajax-load" data-page="<?=CHtml::normalizeUrl(array('category/EditForm/id/'.$subcategory->id)) ?>" href="#i">i</a>
										<a class="icon pull-right font-small pad5 ajax-load" data-page="<?=CHtml::normalizeUrl(array('category/addForm/parent_id/'.$subcategory->id)) ?>" href="#g">+</a>
									</li>

									<? if( ($subcategories2 = $subcategory->sub) != null ): ?>
										<div id="subcat_<?=$subcategory->id?>" class="sort-subcat2 subcategory-container" style="display: none;">
											<? foreach ($subcategories2 as $subcategory2) :?>
												<div>
													<li id="menu_item_<?=$subcategory2->id?>" class="shower subcat2 cat-<?= $subcategory->id ?> ajax-filter-category" data-id="<?= $subcategory2->id ?>" data-type="category">
														<a class="title">
															<?= $subcategory2->title ?>
														</a>
														<a class="icon pull-right font-small pad5 confirm-delete" href="<?= CHtml::normalizeUrl(array('category/deleteCategory/id/'. $subcategory2->id)) ?>">g</a>
														<a class="icon pull-right font-small pad5 ajax-load" data-page="<?= CHtml::normalizeUrl(array('category/EditForm/id/'. $subcategory2->id)) ?>" href="#i">i</a>
													</li>
												</div>
											<? endforeach?>
										</div>
									<? endif ?>
								</div>
							<? endforeach?>
						</div>
					<? endif ?>
				</div>
			<? endforeach ?>
		</div>
	</ul>
</div>

<div class="right-pane">
	<div class="search">
		<input class="input manti-clearer" placeholder="<?= Yii::t( 'app', 'search' ); ?>" id="search-input">
		<div class="input-clear" id="search-input">&times;</div>
		<a href="" class="btn-green ajax-load" data-page="<?= CHtml::normalizeUrl(array('catalog/Restaurant')) ?>"><?= Yii::t( 'catalog', 'add_item' ); ?></a>
	</div>
	<table class="table" style="width: 100%">
		<thead>
			<tr>
				<td><?= Yii::t( 'app', 'image' ); ?></td>
				<td><?= Yii::t( 'app', 'item_name' ); ?></td>
				<td><?= Yii::t( 'app', 'article' ); ?></td>
				<td><?= Yii::t( 'app', 'price' ); ?></td>
				<td><?= Yii::t( 'app', 'brand' ); ?></td>
				<td><?= Yii::t( 'app', 'count' ); ?></td>
			</tr>
		</thead>
		<tbody id="items"></tbody>
	</table>
	<div class="btn-group" id="pagination">
	</div>
</div>

<script type="text/javascript">
	var filter = {};
	var limit;
	var offset;
	var itemcount = 0;

	$(function () {
		limit = 20;
		offset = 0;
		filter['limit'] = limit;
		filter['offset'] = 0;

		composeFilter();

		$('.ajax-filter-category').click(function (e) {
			filter['category'] = $(this).data('id');
			composeFilter();
			e.stopPropagation();
		});

		function composeFilter() {
			var newHash = '';
			var post = { filter: {} };
			for( var i in filter ) {
				if( filter.hasOwnProperty(i) ) {
					newHash += i + '=' + filter[i] + '&';
					post.filter[i] = filter[i];
				}
			}

			window.location.hash = '#' + newHash;
			var html =
				'<tr>'+
					'<td colspan="7" style="text-align: center; padding: 20px;">'+
						'<img src="<?= $this->baseUrl ?>/img/loader.gif">'+
					'</td>'+
				'</tr>';

			$('#items').html(html);

			$.post(
				'<?= CHtml::normalizeUrl(array('catalog/FilterCatalogItems'))?>',
				post,
				function (data) {
					$('#items').html(data);
					if( data == "" ) {
						$('.more-products').remove();
					}

					if( offset == 0 ) {
						$('.catalog').html(data);
					} else {
						$('.catalog').append(data);
					}
					// ajaxInception();
					itemcount = $('#itemcount').text();
					$('#pagination').html('<a class="btn btn-green prev-page"> < </a>');

					for( var i = 1; i <= Math.ceil(itemcount / limit); i++ ) {
						$("#pagination").append("<a class='btn btn-green to-page'>" + i + "</a>");
					}

					$('#pagination').append('<a class="btn btn-green next-page"> > </a>');
					$('.next-page').unbind('click');
					$('.prev-page').unbind('click');
					$('.to-page').unbind('click');
					$('.next-page').click(function () {

						if( parseInt(itemcount) - (parseInt(filter['offset']) + parseInt(limit)) > 0 ) {
							filter['offset'] += limit;
							composeFilter();
						}
					});
					$('.prev-page').click(function () {
						if (filter['offset'] > 0) {
							filter['offset'] -= limit;
							composeFilter();
						}
					});
					$('.to-page').click(function () {
						filter['offset'] = (limit) * (parseInt($(this).html()) - 1);
						composeFilter();
					});
				}
			);
		}

		$('.sort-cat,.sort-subcat,sort-subcat2').sortable( {
			update : function() {
				var count = 0;
				$('.sort-cat').children().each(function() {
					$.get("<?= $this->baseUrl . '/admin/catalog/updateCategoryOrder/' ?>", {id : $(this).data('id'), order : count});
					count++;
				});
			}
		});

		$('.shower').bind('click',function(){
			$('.content').css( 'min-height', Math.max( $('.left-pane').height(), $('.right-pane').height() ) );
		});
		$('.content').css( 'min-height', Math.max( $('.left-pane').height(), $('.right-pane').height() ) );
	});
</script>